<template>
  <div class="shou">
      <header>
          <h3>
              <span>《</span>
              <span>多家网</span>
              <span></span>
          </h3>
          <h4>
              <span></span>
              <span><input type="text" placeholder="热门搜索"></span>
              <span>分类</span>
          </h4>
      </header>
      <main>
          <template>
            <div class="block">
                <el-carousel height="150px">
                <el-carousel-item v-for="item in 4" :key="item">
                    <h3 class="small">{{ item }}</h3>
                </el-carousel-item>
                </el-carousel>
            </div>
            </template>
            <div class="sel">
                <dl v-for="item in list" :key="item.id">
                    <dt>

                    </dt>
                    <dd>{{item.title}}</dd>
                </dl>
            </div>
      </main>
  </div>
</template>

<script>
export default {
    data(){
        return {
            list:[
                {
                    img:"",
                    title:"成绩奖励",
                    id:1
                },
                {
                    img:"",
                    title:"成绩奖励",
                    id:2
                },
                {
                    img:"",
                    title:"成绩奖励",
                    id:3
                },
                {
                    img:"",
                    title:"成绩奖励",
                    id:4
                },
                {
                    img:"",
                    title:"成绩奖励",
                    id:5
                },
                {
                    img:"",
                    title:"成绩奖励",
                    id:6
                },
                {
                    img:"",
                    title:"成绩奖励",
                    id:7
                },
                {
                    img:"",
                    title:"成绩奖励",
                    id:8
                }
            ]
        }
    }
}
</script>

<style lang="scss">
.shou{
     .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }
    
    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
    background: rgb(24, 29, 34);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    header{
        width: 100%;
        h3{
            color: #fff;
            display: flex;
            align-items: center;
            height: 50px;
            justify-content: space-between;
            font-size: 20px;
            font-weight: normal;
        }
        h4{
            background: rgb(3, 173, 46);
            height: 50px;
            display: flex;
            align-items: center;
            color: #fff;
            font-weight: normal;
            justify-content: space-between;
            padding: 0 10px;
            span:nth-child(2){
                width: 90%;
                input{
                    flex:1;
                    width: 80%;
                    height: 30px;
                    border-radius: 20px;border:none;
                }
                ::-webkit-input-placeholder{
                    padding-left: 20px;
                }
            }
        }
    }
    .sel{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        color: #fff;
        dl{
            width: 25%;
            text-align: center;
            dt{
                width: 50px;
                height: 50px;
                background: chocolate;
                border-radius: 50%;
                text-align: center;
                margin: 15px auto;

            }
        }
    }
}
</style>